<script setup lang="ts">
import { onMounted, ref, toRaw } from "vue";
import UpDown from "./comm/upDown.vue";
import { btns, btnKey, listArr, keyDown, resetKey, type CoinPairs, TriangleType } from "./scripts/tab";
import { BookMark, keyType } from "@/comm/BookMark";
import JEmpty from "@/components/j-empty/index.vue";
import JNumber from "@/components/j-number/index.vue";
import { useKline } from "@/stores/kline";
import { BtnType, onOpen } from "../scripts/JBookMark";
import { Bus, CoinPairs as CoinPairS } from "@/connetion/Bus";
import BookMarkImg from "@/components/j-svg/bookMarkImg.vue";
import JSort from "@/components/j-sort/index.vue";

const kline = useKline();
listArr.value = toRaw(kline.map) as CoinPairs[];
const listArr_ = ref<CoinPairs[]>([]);

Bus.on(CoinPairS, (btn: any) => {
    btnKey.value = btn;
    initData();
});

function initData() {
    const arr = new BookMark(keyType.CoinPairs).getData();
    let arr_ = arr.map(item => toRaw(listArr.value).filter(item_ => item_.id === item)[0]);
    // if (arr_.length === 0) return;
    // listArr_.value = arr_;
    console.log('yzt___收藏币兑数据', arr_);

    listArr_.value = sort(arr_.filter(item => item !== undefined));
}

function onDown(item: any) {
    const isDel = new BookMark(keyType.CoinPairs).delDate(item.id);
    if (isDel) {
        initData();
    } else {
        console.log("删除失败！");
    }
}

/**排序给入arr的 */
function sort(arr: CoinPairs[]) {
    const btn = btnKey.value;
    arr.sort((a: any, b: any) => {
        if (btn.key === TriangleType.UP) {
            //@ts-ignore
            return a[btn.val] < b[btn.val] ? -1 : 1;
        } else if (btn.key === TriangleType.DOWN) {
            //@ts-ignore
            return a[btn.val] < b[btn.val] ? 1 : -1;
        } else {
            return 0;
        }
    });
    return arr;
}

onMounted(() => {
    // console.log('yzt___tab',toRaw(listArr.value));
    // resetKey();
    initData();
});
</script>

<template>
    <div class="tab">
        <VRow class="had c-title-5 c-clor" no-gutters>
            <VCol v-for="(item, idx) in btns" :class="`col${idx} d-flex`" :cols="item.cols" :key="item.val"
                @mousedown="() => keyDown(item)">
                <span>{{ item.name }}</span>&nbsp;
                <!-- <UpDown :keyType="item.key"></UpDown> -->
                <JSort :sort="{ val: Number(item.key), key: idx }" :call-fun="() => { }"></JSort>
            </VCol>
        </VRow>
        <div class="bdy overflow-y-auto">
            <VRow class="c-title-4" no-gutters v-for="item in listArr_" :key="item?.imageUrl">
                <VCol class="col0 d-flex align-center" cols="4">
                    <BookMarkImg @click.stop.prevent="() => onDown(item)"></BookMarkImg>
                    <!-- <VIcon @click.stop.prevent="() => onDown(item)" size="15">mdi mdi-star</VIcon> -->
                    <p class="coin-link" @click="() => onOpen(BtnType.CoinPairs, item.symbol)">
                        <span>{{ item?.baseCurrency }}</span>
                        <span class="c-clor">/{{ item?.quoteCurrency }}</span>
                    </p>
                </VCol>
                <VCol class="col1" cols="3"> ${{ item?.lastPrice }} </VCol>
                <VCol class="col2" cols="3"
                    :style="item?.priceChangePercent > 0 ? 'color:var(--win);' : 'color:var(--lose);'"> {{
                        item?.priceChangePercent }}% </VCol>
                <VCol class="col3" cols="2">
                    <JNumber :num="item?.quoteVolume"></JNumber>
                </VCol>
            </VRow>
            <JEmpty class="c-title-4" v-if="listArr_.length === 0" />
        </div>
    </div>
</template>

<style lang="less" scoped>
:deep(#sc) {
    fill: var(--main);
}

.tab {
    height: 100%;

    // background-color: greenyellow;
    .had {
        // user-select: none;
    }

    .v-row {
        height: 15px;
        padding-right: 5px;

        .col2 {
            text-align: left;
            padding-left: 15px;
        }

        .col3 {
            text-align: right;
            justify-content: flex-end;
        }
    }

    .bdy {
        // background-color: rebeccapurple;
        margin-top: 10px;
        height: 94%;
        max-height: 95%;

        .v-row:not(:first-child) {
            margin-top: 15px;
        }

        .col0 {
            p {
                margin-left: 4px;
            }
        }

        // .col2 {
        //     color: red;
        // }
    }
}
</style>
